import React from 'react'
import {Table, Space, ConfigProvider} from 'antd';
import zhCN from 'antd/es/locale/zh_CN';
import './index.less'
import CollectionsPage from './add'

// 表头
const columns = [
    {
        title: '色系名称',
        dataIndex: 'name',
        key: 'name',
        // render: text => <a>{text}</a>,
        align: 'center'
    },
    {
        title: '操作',
        key: 'action',
        render: (text, record) => (
            <Space size="middle">
                <a>编辑</a>
                <a>删除</a>
            </Space>
        ),
        align: 'center'
    },
];


class Content extends React.Component {
    render() {
        console.log('content-onAdd', this.props.onAdd)
        return (
            <div>
                <div className='search_div'>
                    <span>色系列表</span>
                    <div className='add'>
                        <CollectionsPage onAdd={this.props.onAdd.bind(this)}/>
                    </div>

                </div>
                <hr/>
                <ConfigProvider locale={zhCN}>
                    <Table columns={columns}
                           rowKey='id'
                           pagination={{
                               position: ['bottomCenter'],
                               total: this.props.data.data.total,
                               showQuickJumper: true,
                               showSizeChanger: true,
                               showTotal: ((total) => {
                                   return `共 ${total} 条`;
                               }),
                           }}
                           dataSource={this.props.data.data.list}/>
                </ConfigProvider>

            </div>
        )
    }
}


export default Content;